<template>
  <BasicForm @register="registerForm" />
</template>

<script setup lang="ts">
  import { BasicForm, useForm } from '/@/components/Form';
  import { defineProps, onMounted } from 'vue';
  import { FormSchema } from '/@/components/Form/index';
  import { typeList } from './collapse.data';
  const props = defineProps({
    type: {
      type: String,
    },
    list: {
      type: Array,
    },
    deletedList: {
      type: Array,
    },
    currentSelect: {
      type: String,
    },
  });
  const emit = defineEmits(['select']);
  const schemas: FormSchema[] = [
    {
      field: 'type',
      label: '',
      component: 'Select',
      componentProps: {
        allowClear: false,
        placeholder: '类型*',
      },
      colProps: {
        span: 11,
        style: {
          marginRight: '28px',
        },
      },
      required: true,
    },
    {
      field: 'asset',
      label: '',
      component: 'Select',
      componentProps: {
        allowClear: false,
        placeholder: '同步策略*',
        options: [
          { label: '默认', value: 'default' },
          { label: '合并', value: 'merge' },
          { label: '覆盖', value: 'cover' },
        ],
      },
      colProps: {
        span: 11,
      },
      required: true,
    },
    {
      field: 'exportProperties',
      label: '导出属性',
      component: 'Checkbox',
      colProps: {
        span: 24,
      },
      ifShow: () =>
        !['notificationTemplates', 'notificationRecipients', 'notificationRules'].some(
          (item) => props.type == item,
        ),
    },
    {
      field: 'exportAssociations',
      label: '导出关联',
      component: 'Checkbox',
      colProps: {
        span: 24,
      },
      ifShow: () =>
        !['notificationTemplates', 'notificationRecipients', 'notificationRules'].some(
          (item) => props.type == item,
        ),
    },
    {
      field: 'exportCredential',
      label: '导出凭据',
      component: 'Checkbox',
      colProps: {
        span: 24,
      },
      ifShow: () => props.type == 'device',
    },
    {
      field: 'allEntity',
      label: '所有实体',
      component: 'Switch',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'entityList',
      label: '',
      component: 'Select',
      componentProps: {
        mode: 'multiple',
        placeholder: '实体列表',
      },
      colProps: {
        span: 24,
      },
      ifShow: ({ values }) => {
        return values.allEntity;
      },
    },
  ];

  const [registerForm, { updateSchema }] = useForm({
    layout: 'vertical',
    schemas,
    showActionButtonGroup: false,
    submitFunc: async () => {},
    resetFunc: async () => {},
    actionColOptions: {
      span: 24,
    },
  });

  const changeList = (isSelect?: Boolean, delList?: any) => {
    updateSchema({
      field: 'type',
      componentProps: {
        allowClear: false,
        placeholder: '类型*',
        options: typeList?.filter((item: any) => {
          return (
            (isSelect ? delList.includes(item.value) : props.deletedList?.includes(item.value)) ||
            item.value == props.type
          );
        }),
        onChange: (value) => {
          emit('select', props.currentSelect, value);
        },
      },
      defaultValue: props.type,
    });
  };

  onMounted(() => changeList());
  defineExpose({ changeList, type: props.type });
</script>
